<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <view class="nav-bar">
            <view class="left">
                <u-icon name="arrow-left" size="32" color="#333" @click="goBack"></u-icon>
            </view>
            <view class="title">医生排班</view>
        </view>
        
        <!-- 医生信息 -->
        <view class="doctor-info">
            <image class="avatar" :src="doctorInfo.avatar" mode="aspectFill"></image>
            <view class="info">
                <view class="name">{{doctorInfo.name}}</view>
                <view class="title">{{doctorInfo.title}}</view>
            </view>
        </view>
        
        <!-- 日期选择 -->
        <scroll-view class="date-scroll" scroll-x>
            <view class="date-list">
                <view 
                    class="date-item" 
                    v-for="(item, index) in dateList" 
                    :key="index"
                    :class="{'active': currentDate === item.date}"
                    @click="selectDate(item.date)"
                >
                    <view class="day">{{item.day}}</view>
                    <view class="date">{{item.date}}</view>
                    <view class="status" :class="item.status"></view>
                </view>
            </view>
        </scroll-view>
        
        <!-- 时间段选择 -->
        <scroll-view class="time-scroll" scroll-y>
            <view class="time-container">
                <!-- 上午时段 -->
                <view class="time-section">
                    <view class="title">上午</view>
                    <view class="time-list">
                        <view 
                            class="time-item" 
                            v-for="(item, index) in morningTimes" 
                            :key="index"
                            :class="{'disabled': !item.available}"
                            @click="selectTime(item)"
                        >
                            <text>{{item.time}}</text>
                            <text class="status">{{item.available ? '可预约' : '已约满'}}</text>
                        </view>
                    </view>
                </view>
                
                <!-- 下午时段 -->
                <view class="time-section">
                    <view class="title">下午</view>
                    <view class="time-list">
                        <view 
                            class="time-item" 
                            v-for="(item, index) in afternoonTimes" 
                            :key="index"
                            :class="{'disabled': !item.available}"
                            @click="selectTime(item)"
                        >
                            <text>{{item.time}}</text>
                            <text class="status">{{item.available ? '可预约' : '已约满'}}</text>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
        
        <!-- 底部预约按钮 -->
        <view class="bottom-bar">
            <view class="selected-info" v-if="selectedTime">
                <text>已选择：{{currentDate}} {{selectedTime.time}}</text>
            </view>
            <view class="btn" @click="handleAppointment">
                <text>立即预约</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            doctorInfo: {
                id: 1,
                name: '张医生',
                title: '主任医师',
                avatar: '/static/images/doctor1.png'
            },
            currentDate: '',
            dateList: [],
            morningTimes: [],
            afternoonTimes: [],
            selectedTime: null
        }
    },
    methods: {
        goBack() {
            uni.navigateBack()
        },
        initDateList() {
            const today = new Date()
            const list = []
            
            for (let i = 0; i < 7; i++) {
                const date = new Date(today)
                date.setDate(today.getDate() + i)
                
                const day = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][date.getDay()]
                const dateStr = `${date.getMonth() + 1}月${date.getDate()}日`
                
                list.push({
                    day,
                    date: dateStr,
                    status: i === 0 ? 'today' : (i < 3 ? 'available' : 'full')
                })
            }
            
            this.dateList = list
            this.currentDate = list[0].date
        },
        initTimeList() {
            // 上午时段
            this.morningTimes = [
                { time: '08:00-08:30', available: true },
                { time: '08:30-09:00', available: true },
                { time: '09:00-09:30', available: false },
                { time: '09:30-10:00', available: true },
                { time: '10:00-10:30', available: true },
                { time: '10:30-11:00', available: false },
                { time: '11:00-11:30', available: true }
            ]
            
            // 下午时段
            this.afternoonTimes = [
                { time: '14:00-14:30', available: true },
                { time: '14:30-15:00', available: false },
                { time: '15:00-15:30', available: true },
                { time: '15:30-16:00', available: true },
                { time: '16:00-16:30', available: false },
                { time: '16:30-17:00', available: true }
            ]
        },
        selectDate(date) {
            this.currentDate = date
            this.selectedTime = null
            // 这里应该根据选择的日期重新加载时间段数据
        },
        selectTime(time) {
            if (!time.available) return
            
            this.selectedTime = time
        },
        handleAppointment() {
            if (!this.selectedTime) {
                uni.showToast({
                    title: '请选择预约时间',
                    icon: 'none'
                })
                return
            }
            
            uni.showModal({
                title: '确认预约',
                content: `您确定要预约${this.currentDate} ${this.selectedTime.time}的号源吗？`,
                success: (res) => {
                    if (res.confirm) {
                        // 这里应该调用预约接口
                        uni.showToast({
                            title: '预约成功',
                            icon: 'success'
                        })
                        setTimeout(() => {
                            uni.navigateBack()
                        }, 1500)
                    }
                }
            })
        }
    },
    onLoad(options) {
        this.initDateList()
        this.initTimeList()
    }
}
</script>

<style lang="scss">
.container {
    min-height: 100vh;
    background-color: #F7F7FA;
    display: flex;
    flex-direction: column;
    
    .nav-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 30rpx;
        background-color: #fff;
        
        .title {
            font-size: 36rpx;
            font-weight: bold;
            color: #333;
        }
    }
    
    .doctor-info {
        display: flex;
        align-items: center;
        padding: 30rpx;
        background-color: #fff;
        margin-bottom: 20rpx;
        
        .avatar {
            width: 100rpx;
            height: 100rpx;
            border-radius: 50rpx;
            margin-right: 20rpx;
        }
        
        .info {
            .name {
                font-size: 32rpx;
                font-weight: bold;
                color: #333;
                margin-bottom: 10rpx;
            }
            
            .title {
                font-size: 24rpx;
                color: #666;
            }
        }
    }
    
    .date-scroll {
        background-color: #fff;
        padding: 20rpx 0;
        margin-bottom: 20rpx;
        
        .date-list {
            display: flex;
            padding: 0 20rpx;
            
            .date-item {
                width: 120rpx;
                height: 120rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                margin-right: 20rpx;
                background-color: #F7F7FA;
                border-radius: 20rpx;
                position: relative;
                
                &.active {
                    background-color: #1890FF;
                    
                    .day, .date {
                        color: #fff;
                    }
                }
                
                .day {
                    font-size: 24rpx;
                    color: #666;
                    margin-bottom: 10rpx;
                }
                
                .date {
                    font-size: 28rpx;
                    color: #333;
                    font-weight: bold;
                }
                
                .status {
                    position: absolute;
                    right: 10rpx;
                    top: 10rpx;
                    width: 12rpx;
                    height: 12rpx;
                    border-radius: 6rpx;
                    
                    &.today {
                        background-color: #52c41a;
                    }
                    
                    &.available {
                        background-color: #1890FF;
                    }
                    
                    &.full {
                        background-color: #999;
                    }
                }
            }
        }
    }
    
    .time-scroll {
        flex: 1;
        height: 0;
        background-color: #fff;
        
        .time-container {
            padding: 30rpx;
            
            .time-section {
                margin-bottom: 40rpx;
                
                &:last-child {
                    margin-bottom: 0;
                }
                
                .title {
                    font-size: 28rpx;
                    font-weight: bold;
                    color: #333;
                    margin-bottom: 20rpx;
                }
                
                .time-list {
                    display: flex;
                    flex-wrap: wrap;
                    
                    .time-item {
                        width: 200rpx;
                        height: 80rpx;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        background-color: #F7F7FA;
                        border-radius: 20rpx;
                        margin-right: 20rpx;
                        margin-bottom: 20rpx;
                        
                        &:nth-child(3n) {
                            margin-right: 0;
                        }
                        
                        &.disabled {
                            opacity: 0.5;
                        }
                        
                        text {
                            font-size: 24rpx;
                            color: #333;
                            
                            &.status {
                                font-size: 20rpx;
                                color: #666;
                                margin-top: 6rpx;
                            }
                        }
                    }
                }
            }
        }
    }
    
    .bottom-bar {
        background-color: #fff;
        padding: 20rpx 30rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        
        .selected-info {
            flex: 1;
            
            text {
                font-size: 24rpx;
                color: #666;
            }
        }
        
        .btn {
            width: 200rpx;
            height: 80rpx;
            background-color: #1890FF;
            border-radius: 40rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            
            text {
                font-size: 28rpx;
                color: #fff;
            }
        }
    }
}
</style> 